﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <title>商品详情—易购触屏版</title>
</head>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/detail.css">
<link rel="stylesheet" href="./css/foot.css">
<link rel="stylesheet" href="./css/main.css">
<style>
  .nav,.footer {
    background-image: linear-gradient(to right, #FDF0DF, #FBF3E7);
  }
</style>

<body>
  <!-- 公用头部导航 -->
  <nav class="nav">
    <a class="goback" href="javascript:history.back(1)"></a>
    <div class="nav-title">商品详情</div>
    <a href="#" class="home"></a>
  </nav>
  <section class="layout" id="mylayout">
    <!-- 在此处添加并完善文档结构代码，参考以下注释文档 -->
    <!-- <div class="detail_img">
        </div>
        <table class="detail_table">
            <tr>
                <td style="width: 20%">商品编号</td>
                <td style="width: 300px"></td>
            </tr>
            <tr>
                <td colspan="2" class="btn">
                    <span class="detail_order">加入购物车</span>
                    <span class="detail_buy">立即购买</span>
                </td>
            </tr>
        </table> -->

  </section>
  <!-- 公用尾部 -->
  <footer class="footer">
    <ul class="foot-list">
      <li>
        <a name="shouye_none_weibu_word01" href="#" id="footerLogin" class="foot1">登录</a>
        <a name="shouye_none_weibu_word02" href="#" id="footerRegister" class="foot2">注册</a>
        <a name="shouye_none_weibu_word03" href="#" id="shopCartTip" class="foot3">购物车</a>
      </li>
    </ul>
    <div class="copyright">
      Copyright&copy; 2018-2020 m.yigou.com
    </div>
  </footer>



</body>

</html>
<script src="./js/axios.min.js"></script>
<script>
  var mylayout = document.getElementById('mylayout')

  var jsonData = {
    id: 1
  };
  axios.post('http://127.0.0.1:8080/h2/goods/getGoods', jsonData)
    .then(res => {
      console.log(res.data)
      if (res.status == 200) {
        if (res.data.success) {
          var div = `
              <div class="detail_img">
                  <img src="http://127.0.0.1:8080/h2${res.data.data.imagePath}">
              </div>
              <table class="detail_table">
        <tr>
            <td style="width: 20%">商品编号</td>
            <td style="width: 300px">${res.data.data.id}</td>
        </tr>
                        
        <tr>
            <td>商品标题</td>
            <td>${res.data.data.title}</td>
        </tr>
                        
        <tr>
            <td>商品描述</td>
            <td>${res.data.data.content}</td>
        </tr>
                        
        <tr>
            <td>商品价格</td>
            <td>&yen;${res.data.data.price}</td>
        </tr>
                        
        <tr>
            <td colspan="2" class="btn">
            <span class="detail_order">加入购物车</span>
            <span class="detail_buy">立即购买</span>
        </td>
                                
      </tr>
    </table>
  `
          mylayout.innerHTML = div
        }
      }
    })
</script>